<!-- 组件创建：每个Vue组件通常由模板（template）、脚本（script）和样式（style）三部分组成。 -->

<!-- keep-alive：是Vue内置的一个抽象组件，专门负责组件的缓存 
  在页面中使用keep-alive包裹组件时，被包裹的组件在切换时不会被销毁，而是被缓存起来。
  下次再切换回这个组件时，直接从缓存中取出，不用重新创建和渲染组件，大大节省了时间和性能开销。
  这在有大量页面切换的应用中，比如多标签页应用、单页应用（SPA）的路由切换场景，效果尤为显著，
  是提升用户体验的关键技术点，也是当下前端性能优化的热门话题之一。
 -->

 <!-- router-view：是Vue Router中用于显示路由匹配组件的占位符，具体内容在router文件夹下-->

 <!-- 通过将router-view包裹在keep-alive中：所有通过路由切换的组件都会被缓存起来
  这样，当用户在不同路由页面之间切换时，组件的状态和数据都会被保留，不会丢失，
  极大地提升了应用的流畅度和用户体验，是实现单页应用高效交互的重要手段。
  不过，这样直接使用keep-alive会缓存所有被包裹的组件。在实际项目中，可能并不想缓存所有组件，
  比如一些临时性的提示组件、表单组件（用户每次进入都希望是全新状态），
  这时就需要用到keep-alive的include和exclude属性来精确控制哪些组件该缓存，哪些不该缓存。
  参考文档：https://blog.csdn.net/qq_37212162/article/details/147462321
  
  还可以根据路由的 meta 字段中的 keepAlive 属性来决定是否缓存组件。没有设置或其值为 false，则组件不会被缓存。
 -->
<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  body {
    margin: auto;
  }
</style>
